<template>
    <div class="todo-list">
    <div class="container">
      <div class="tabs">
        <ul>
          <li :class="{'is-active': tabType === 'all'}"><a href="/" @click.prevent="toggleTabs('all')">所有({{list.length}})</a></li>
          <li :class="{'is-active': tabType === 'completed'}"><a href="/" @click.prevent="toggleTabs('completed')">已完成({{completedTodos.length}})</a></li>
          <li :class="{'is-active': tabType === 'uncompleted'}"><a href="/" @click.prevent="toggleTabs('uncompleted')">未完成({{uncompletedTodos.length}})</a></li>
        </ul>
      </div>

      <div class="columns is-multiline">
        <div class="column is-full" v-if="currentTodos.length === 0">
          当前待办事项列表为空
        </div>
        <template v-else>
          <div
            class="column is-one-quarter"
            v-for="todo in currentTodos"
             v-bind:key="todo.id"
          >
            <todo-item
              :id="todo.id"
              :title="todo.title"
              :completed="todo.completed"
            />
          </div>
        </template>
      </div>
    </div>
    </div>
</template>

<script>
import TodoItem from './TodoItem'

export default {
  name: 'TodoList',
  components: { // 局部注册组件
    TodoItem
  },
  data() {
    return {
      tabType: 'all',
      currentTodos: []
    }
  },
  props: ['list'], // 声明当前组件可接收的属性
  computed: {
    completedTodos() {
      return this.list.filter(todo => todo.completed)
    },
    uncompletedTodos() {
      return this.list.filter(todo => !todo.completed)
    }
  },
  methods: {
    // 切换选项卡
    toggleTabs(type) {
      console.log('状态：', type)
      this.tabType = type
      this.setCurrentTodos()
    },
    // 根据选项卡选择，设置当前显示的待办事项
    setCurrentTodos() {
      switch (this.tabType) {
        case 'all':
          this.currentTodos = this.list
          break
        case 'completed':
          this.currentTodos = this.completedTodos
          break
        case 'uncompleted':
          this.currentTodos = this.uncompletedTodos
          break
      }
    }
  },
  watch: {
    list: {
      handler() {
        this.setCurrentTodos()
      },
      deep: true
    }
  }
}
</script>

 <style lang="scss" scoped>
 </style>
